<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <!-- <i class="iconfont icon-logo-011"></i> -->
        <img src="@/assets/icon/logo.svg" width="200" />
      </div>
      <div class="right">
        <el-popover placement="bottom" trigger="hover">
          <div class="qrcode">
            <!-- <img src="../../assets/img/qrcode.png" alt style="width:120px;height:120px" /> -->
            <img src="../../assets/img/tallyapp.png" alt style="width:120px;height:120px" />
          </div>
          <!-- <el-link slot="reference" href="#" target="_blank">下载手机端</el-link> -->
          <p slot="reference">下载手机端</p>
        </el-popover>
        <!--        <span class="line"></span>
        <el-link href="http://api.portzj.com/${this.$ServiceName}/api/external/downppm/down" target="_blank">下载客户端</el-link>-->
      </div>
    </div>
    <div class="main">
      <!-- 港口数字化 -->
      <img src="../../assets/icon/text1.svg" alt class="title" />
      <!-- 背景栏杆 -->
      <div class="langan"></div>
      <!-- 人物 -->
      <div class="person"></div>
      <!-- 信息 -->
      <div class="msg-one"></div>
      <div class="msg-two"></div>
      <div class="msg-three"></div>
      <!-- 表单 -->
      <div class="login_box">
        <el-form :model="form" :rules="loginFormRules" ref="loginFormRef" label-width="0" class="form_box">
          <!-- 用户名 -->
          <el-form-item prop="accNo">
            <el-input prefix-icon="el-icon-user" v-model="form.accNo" placeholder="用户名"
              @keyup.enter.native="onSubmit"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="accPwd">
            <el-input :type="passw" prefix-icon="el-icon-unlock" v-model="form.accPwd" placeholder="密码"
              @keyup.enter.native="onSubmit">
              <i slot="suffix" :class="icon" @click="showPass" id="poiner"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="imgCode">
            <el-input v-model="form.imgCode" placeholder="请输入验证码" @keyup.enter.native="onSubmit" style="width: 270px;"
              :maxlength="4"></el-input>
            <div class="divIdentifyingCode" @click="getIdentifyingCodeMain()" style="float:right">
              <img id="imgIdentifyingCode" style="height:40px; width: 110px; cursor: pointer;" alt="点击更换"
                title="点击更换" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="onSubmit" :loading="loginLoading">{{ loginLoading? '登录中...': '登 录' }}</el-button>
          </el-form-item>
          <div class="accPwd_col">
            <el-checkbox v-model="form.checked" @change="handerRemember">记住密码</el-checkbox>
            <!-- <el-link @click="forge">忘记密码？</el-link> -->
          </div>
        </el-form>
      </div>
    </div>
    <div class="footer">Copyright © 2023 唐山曹妃甸文丰码头有限公司</div>
  </div>
</template>

<script>
import { JSEncrypt } from 'jsencrypt'
export default {
  data() {
    return {
      //用于改变Input类型
      passw: 'password',
      //用于更换Input中的图标
      icon: 'el-input__icon el-icon-view',
      visible: true,
      publicKey: "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDZo+eRHci5jxBX5Ia7UqFST41bWsPda7u243vdFLxpPxEMHHvZEb76Xv1dHuajiBWCbenG3nU8OgAqZAQxF+bid40mXs45+TZAEHPoHB9m6ICqWry/GRlftd22F+TZLrQURGlyRdBV5nM8rJ4qUOkwRdO+XEupIuhBdngJYzRTZwIDAQAB",
      // 表单数据
      form: {
        accNo: '', //用户名
        accPwd: '', //密码
        checked: false //记住密码
      },
      //验证规则
      loginFormRules: {
        accNo: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 32,
            message: '长度在 2 到 32 个字符',
            trigger: 'blur'
          }
        ],
        accPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ],
        imgCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            message: '请输入正确的验证码！',
            trigger: 'blur'
          }
        ],
      },
      loginLoading: false,
    }
  },
  watch: {
    "form.imgCode"() {
      this.form.imgCode = this.form.imgCode.replace(/[\W]/g, '');
    }
  },
  created() {
    this.getRemember()
    this.getIdentifyingCodeMain()
  },
  methods: {
    //密码加密方法
    encrypt(key, oldPwd) {
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(key);
      let encrypted = encrypt.encrypt(oldPwd);
      return encrypted;
    },
    getIdentifyingCodeMain() {
      this.$http.get(`/${this.$ServiceName}/api/external/kaptcha/getkaptcha`).then(res => {
        let objs = document.getElementById('imgIdentifyingCode');
        objs.src = 'data:image/jpeg;base64,' + res.data.data.img;
        this.imgCodeData = res.data.data.img;
        this.imgCodeDataId = res.data.data.kaptchaId;
      })
    },
    forge() {
      return this.$message.warning('请联系管理员')
    },
    onSubmit() {
      var _this = this;
      this.$refs['loginFormRef'].validate(async valid => {
        if (!valid) return
        //登录请求
        let accNo = this.form.accNo
        let accPwd = this.form.accPwd
        let kaptcha = this.form.imgCode
        let kaptchaId = this.imgCodeDataId
        accPwd = this.encrypt(this.publicKey, this.form.accPwd)
        let form = { accNo, accPwd, kaptcha, kaptchaId }
        this.loginLoading = true
        await this.$http.post(
          `/${this.$ServiceName}/api/external/login`,
          form
        ).then(res => {
          this.loginLoading = false
          var resultData = res.data.data;
          if (resultData) {
            let token = res.headers.token
            let userName = res.data.data.data.userName
            let userId = res.data.data.data.userId
            let companyName = res.data.data.data.companyName
            let deptCode = res.data.data.data.deptCode
            let deptName = res.data.data.data.deptName
            let companyCode = res.data.data.data.companyCode //公司id
            let groupCompanyName = res.data.data.data.groupCompanyName
            let groupCompanyCode = res.data.data.data.groupCompanyCode
            let avatar = res.data.data.data.avatar
            let loginIp = res.data.data.data.loginIp
            let permissions = res.data.data.permissions

            window.sessionStorage.setItem('permissions', permissions)
            window.sessionStorage.setItem('companyCode', companyCode)
            window.sessionStorage.setItem('groupCompanyName', groupCompanyName)
            window.sessionStorage.setItem('groupCompanyCode', groupCompanyCode)
            window.sessionStorage.setItem('deptCode', deptCode)
            window.sessionStorage.setItem('deptName', deptName)
            window.sessionStorage.setItem('token', token)
            window.sessionStorage.setItem('userName', userName)
            window.sessionStorage.setItem('userId', userId)
            window.sessionStorage.setItem('companyName', companyName)
            window.sessionStorage.setItem('compCode', companyCode)
            window.sessionStorage.setItem('avatar', avatar)
            window.sessionStorage.setItem('loginIp', loginIp)
            window.sessionStorage.setItem('accNo', res.data.data.data.accNo)
            sessionStorage.removeItem("TagList")
            _this.$router.push('/homePage')

          }
        }).catch((error) => {
          this.loginLoading = false
          this.getIdentifyingCodeMain()
        });
      })
    },
    //记住密码
    handerRemember() {
      if (this.form.checked) {
        if (this.form.accNo == '' || this.form.accPwd == '') {
          this.$message.warning('请输入账户名和密码')
          return (this.form.checked = false)
        }
        window.localStorage.setItem('accNo', this.form.accNo)
        window.localStorage.setItem('accPwd', this.form.accPwd)
      } else {
        window.localStorage.removeItem('accNo')
        window.localStorage.removeItem('accPwd')
        this.form.checked = false
      }
    },
    //获取本地记住密码数据
    getRemember() {
      let accNo = window.localStorage.getItem('accNo')
      let accPwd = window.localStorage.getItem('accPwd')
      if (accNo == null || accPwd == null) {
        return (this.form.checked = false)
      } else {
        this.form.accNo = accNo
        this.form.accPwd = accPwd
        this.form.checked = true
      }
    }, //密码的隐藏和显示
    showPass() {
      //点击图标是密码隐藏或显示
      if (this.passw == 'text') {
        this.passw = 'password'
        //更换图标
        this.icon = 'el-input__icon el-icon-view'
      } else {
        this.passw = 'text'
        this.icon = 'el-input__icon el-icon-loading'
      }
    }
  }
}
</script>
<style lang="less">
.el-popover {
  min-width: 64px;
}
</style>
<style lang="less" scoped>
/*@import '../../../../node_modules/animate.css/animate.css';*/
// 动画效果
@keyframes fadeInOut {

  //鼠标移出 船
  from {
    opacity: 1;
    -webkit-transform: translate3d(2%, 0, 0);
    transform: translate3d(2%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLefe {

  //鼠标移入 船
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(2%, 0, 0);
    transform: translate3d(2%, 0, 0);
  }
}

@keyframes msgLefeOut {
  from {
    opacity: 1;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes msgLefe {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
}

@keyframes msgrightOut {
  from {
    opacity: 1;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes msgright {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }
}

@keyframes pulseOut {
  0% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  100% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
  }
}

// 头部
.container {
  overflow: hidden;
}

#poiner {
  cursor: pointer;
}

.header {
  width: 100%;
  height: 50px;
  background: #ffffff;
  box-shadow: 0 1px 3px 0 #bcc3d6;
  padding: 0 24px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    font-size: 20px;
    color: #1581f0;
    letter-spacing: -0.62px;
    display: flex;
    align-items: center;
  }

  .right {
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    display: flex;
    align-items: center;

    p {
      height: 40px;
      line-height: 40px;
    }

    .line {
      border: 1px solid #e1e4eb;
      margin: 0 15px;
      height: 20px;
    }
  }
}

// 中间
.main {
  width: 100%;
  height: calc(100vh - 100px);
  background: url('../../assets/img/bg.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
  animation: pulseOut 1s;

  .title {
    position: absolute;
    top: 15%;
    right: 15%;
  }

  // 登录表单
  .login_box {
    position: absolute;
    top: 30%;
    // left: 60%;
    right: 8%;
    width: 28.75rem;
    height: 22rem;
    padding: 0 32px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e1e4eb;
    border-radius: 4px;
    border-radius: 4px;

    .form_box {
      font-size: 14px;
      margin-top: 45px;

      .accPwd_col {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  // 栏杆
  .langan {
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 0;
    background: url('../../assets/img/bg2.png') no-repeat center;
    background-size: 100% 100%;
  }

  // 人物
  .person {
    position: absolute;
    left: 10%;
    top: 40%;
    width: 40%;
    height: 30%;
    background: url('../../assets/img/Bitmap.png') no-repeat center;
    background-size: 100% 100%;
    animation: fadeInOut 1s ease-in;
  }

  // 信息
  .msg-one {
    position: absolute;
    left: -10%;
    top: 40%;
    width: 40%;
    height: 30%;
    background: url('../../assets/icon/img1.svg') no-repeat;
    background-size: 100% 100%;
    animation: msgLefeOut 1s ease-in;
  }

  .msg-two {
    position: absolute;
    left: 15%;
    top: 25%;
    width: 40%;
    height: 30%;
    background: url('../../assets/icon/img2.svg') no-repeat;
    background-size: 100% 100%;
    animation: msgrightOut 1s ease-in;
  }

  .msg-three {
    position: absolute;
    left: 30%;
    top: 40%;
    width: 40%;
    height: 30%;
    background: url('../../assets/icon/img3.svg') no-repeat;
    background-size: 100% 100%;
    animation: msgrightOut 1s ease-in;
  }
}

.main:hover {
  animation: pulse 1s;
  animation-fill-mode: forwards;

  .person {
    animation: fadeInLefe 1s ease-in;
    animation-fill-mode: forwards;
  }

  .msg-one {
    animation: msgLefe 1s ease-in;
    animation-fill-mode: forwards;
  }

  .msg-two {
    animation: msgright 1s ease-in;
    animation-fill-mode: forwards;
  }

  .msg-three {
    animation: msgright 1s ease-in;
    animation-fill-mode: forwards;
  }
}

//尾部
.footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  box-shadow: 0 1px 3px 0 #bcc3d6;
  font-size: 14px;
  color: #606266;
  letter-spacing: 0;
  text-align: center;
}
</style>
